<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h1>登录</h1>
  <hr>
  <!-- <h3>get请求：</h3>
  <form action="/login" method="get" enctype="application/x-www-form-urlencoded">
    用户名:<input type="text" name="username" />
    密码：<input type="password" name="password" />
    <input type="submit" value="提交" />
  </form>

  <h3>post请求：</h3>
  <form action="/login" method="post" enctype="application/x-www-form-urlencoded">
    用户名:<input type="text" name="username" />
    密码：<input type="password" name="password" />
    图片：<input type="file" name="photo" />
    <input type="submit" value="提交" />
  </form> -->
  <h3>AJAX请求：</h3>
  <form action="/login" method="post" enctype="application/x-www-form-urlencoded">
    用户名:<input type="text" name="username" id="username" />
    密码：<input type="password" name="password" id="password" />
    图片：<input type="file" name="photo" />
    <button type="button" id="btnLogin">登录</button>
  </form>
  <script src="./util/jquery-3.6.0.js"></script>
  <script>

    // let url = "https://www.baidu.com/asfds?a=1&b=2&c=3/#adfs?a=2&b=3&c=4"
    // 取出a,b,c的值
    let count = 0;
    let timer = null;
    const loginFn = function () {
      if ( count === 5 ) {
        clearTimeout( timer );
        return;
      }
      count++;

      console.log( "执行函数次数：", count );
      // 1.先拿到用户名，密码
      let username = $( "#username" ).val();
      let password = $( "#password" ).val();
      if ( /^\w{6,20}$/.test( username ) && /^\w{6,8}$/.test( password ) ) {
        $.ajax( {
          type: "post",  // 请求的类型
          url: "/login", // 请求的接口URL
          data: { "username": username, "password": password }, // data是给后端的参数，对象的属性名，就是参数名
          success: function ( data ) { // 请求成功后，执行的回调函数， data参数，为后端返回的数据
            console.log( data ) //{code,msg,} // 一定要先查看，再做后面的判断。
            // 只有再登录成功后，才可以拿后台返回的数据。
            if ( data.code === 0 ) {  //cod等于0时,后端规定表示登录成功。
              let result = data.data[ 0 ]  // 账号的详细信息
              sessionStorage.setItem( 'userInfo', JSON.stringify( result ) ) // 本地存储一下，跳页面后可以用

              // 跳页面的三种方法：
              // alert( data.msg )
              // location.href="/pages/main.html"  // url重写
              // location.assign("/pages/main.html") // 打开新页面，并且生成新的历史纪录
              location.replace( "/pages/main.html" ) // 打开新页面，不生成新的历史纪录
            }
          },
          error ( XMLHttpRequest, textStatus, errorThrown ) {
            // console.log(XMLHttpRequest);
            // console.log(textStatus);
            // console.log(errorThrown);
            timer = setTimeout( function () {
              loginFn();
            }, 5000 )

          }

        } )
      } else {
        alert( '输入的账号、密码格式不对' )
      }
    }

    let btnLogin = $( "#btnLogin" );
    btnLogin.on( 'click', loginFn )
  </script>
</body>

</html>